<template>
	<view class="body">


		<view class="top">

			<view class="tou">
				<image v-if="denglu" src="../../static/icons/leju-logo.png" mode=""></image>
			</view>
			<view class="p">
				<view class="p1" v-if="denglu">
				{{name}}
			</view>
				<view class="p1" v-else>
				hi~
			</view>
			
			<view class="p1" v-if="denglu">
				用户名:{{username}}
			</view>
			<view class="p1" v-else>
				你还没有登录呢
			</view>
			</view>
			
		</view>
		
		
		<view class="button" v-if="!denglu">
			<view class="b1" @tap="zhuce" >
				注册
			</view>
			
			<view class="b2" @tap="login">
				登录
			</view>
		</view>
		
		
		<view class="dingdan">
			<view class="p1">
				<view class="p1-1">
					我的订单
				</view>
				<image src="../../static/icons/arr-r-1.png" mode=""></image>
			</view>
			
			<view class="xian">
			</view>
			
			<view class="icon">
				<view class="icon1" @tap="an">
					<image src="../../static/icons/icon-pay.png" mode=""></image>
					<view class="p2">
						待付款
					</view>
				</view>
				
				<view class="icon1" @tap="an">
					<image src="../../static/icons/pay-done.png" mode=""></image>
					<view class="p2">
						已付款
					</view>
				</view>
				
				<view class="icon1" @tap="an">
					<image src="../../static/icons/icon-car.png" mode=""></image>
					<view class="p2">
						待收货
					</view>
				</view>
				
				<view class="icon1" @tap="an">
					<image src="../../static/icons/icon-done.png" mode=""></image>
					<view class="p2">
						已收货
					</view>
				</view>
				
				<view class="icon1" @tap="an">
					<image src="../../static/icons/icon-back.png" mode=""></image>
					<view class="p2">
						售后
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		<view class="content">
			<view class="logo">
				<view class="logo-1" @tap="shoucang">
					  <image src="../../static/icons/save.png" mode=""></image>
					  <view class="p3">
					  	收藏
					  </view>
				</view>
				
				<view class="logo-1">
					  <image src="../../static/icons/brand.png" mode=""></image>
					  <view class="p3">
					  	品牌
					  </view>
				</view>
				
				<view class="logo-1">
					  <image src="../../static/icons/article.png" mode=""></image>
					  <view class="p3">
					  	文章
					  </view>
				</view>
			</view>
			
			
			
			<view class="logo">
				<view class="logo-1" @tap="dizhi">
					  <image src="../../static/icons/address.png" mode=""></image>
					  <view class="p3">
					  	地址
					  </view>
				</view>
				
				<view class="logo-1">
					  <image src="../../static/icons/card.png" mode=""></image>
					  <view class="p3">
					  	卡包
					  </view>
				</view>
				
				<view class="logo-1">
					  <image src="../../static/icons/kf.png" mode=""></image>
					  <view class="p3">
					  	客服
					  </view>
				</view>
			</view>
			
			
			
			<view class="logo">
				<view class="logo-1">
					  <image src="../../static/icons/security.png" mode=""></image>
					  <view class="p3">
					  	安全
					  </view>
				</view>
				
				<view class="logo-1">
					  <image src="../../static/icons/about.png" mode=""></image>
					  <view class="p3">
					  	关于
					  </view>
				</view>
				
				<view class="logo-1">
					
				</view>
			</view>
		</view>


<view class="di">
	
</view>
	</view><!-- body -->
</template>

<script>
	export default {
		data() {
			return {
			denglu:true,
			name:"",
			username:""
			};
		},
		methods:{
			an(){
				uni.navigateTo({
					url:`./dingdan/dingdan`
				})
			},
			shoucang(){
				uni.navigateTo({
					url:`./shoucang/shoucang`
				})
			},
			dizhi(){
				uni.navigateTo({
					url:`./address/address`
				})
			},
			login(){
				uni.navigateTo({
					url:`./login/login`
				})
			},
			
			zhuce(){
				uni.navigateTo({
					url:`./zhuce/zhuce`
				})
			}
		},
		onLoad() {
			// const value = uni.getStorageSync("code");
			// const value2 = uni.getStorageSync("data");
			// if(value=="S"){
				
			// 	this.denglu=true;
			// 	console.log(value)
			// 	console.log(value2)
			// 	this.name=value2.nickname
			// 	this.username=value2.username
			// }else{
			// 	this.denglu=false;
			// }
			
		},
		onShow() {
			const value = uni.getStorageSync("code");
			const value2 = uni.getStorageSync("data");
			if(value=="S"){
				this.denglu=true;
				console.log(value)
				console.log(value2)
				this.name=value2.nickname
				this.username=value2.username
			}else{
				this.denglu=false;
				uni.showModal({
				    title: '未登录',
				    content: '需要登录后才能查看',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uni.navigateTo({
								url:`./login/login`
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
			
		
			
		}
		
		
	}
</script>

<style lang="scss" scoped>
	.body {
		background-color: #F1ECE7;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}



	.top {
		width: 100%;
		height: 150rpx;
		margin-top: 94rpx;
		display: flex;
		align-items: center;

		.tou {
			width: 150rpx;
			height: 150rpx;
			background-color: #C8C7CC;
			border-radius: 50%;
			margin-left: 40rpx;
			image{
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
		}
		
		.p{
			width: 210rpx;
			height: 80rpx;
			margin-left: 32rpx;
			.p1{
				font-size: 28rpx;
				color: #3D4C46;
				font-weight: bold;
			}
		}


	}
	
	
	.button{
		width: 100%;
		height: 80rpx;
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		.b1{
			text-align: center;
			line-height: 80rpx;
			width: 182rpx;
			height: 76rpx;
			border: 2rpx solid #3D4C46;
			border-radius: 10rpx;
			margin-right: 60rpx;
			font-weight: bold;
			color: #354E44;
		}
		.b2{
			text-align: center;
			line-height: 80rpx;
			width: 182rpx;
			height: 76rpx;
			background: #354E44;
			border: 2rpx solid #3D4C46;
			border-radius: 10rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	
	.dingdan{
		width: 670rpx;
		height: 208rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 52rpx;
		
		
		
		.p1{
			width: calc(100%-110rpx);
			height: 70rpx;
			display: flex;
			padding: 0 55rpx;
			justify-content: space-between;
			align-items: center;
			
			.p1-1{
				font-size: 26rpx;
				color: #3E3E3E;
			}
			
			image{
				width: 15rpx;
				height: 26rpx;
			}
		}
		
		.xian{
			width: 85%;
			height: 2rpx;
			background-color: #dddddd;
			margin: 0 auto;
		}
		
		.icon{
			width: calc(100%-90rpx);
			height: 100rpx;
			padding: 0 45rpx;
			margin-top: 25rpx;
			display: flex;
			justify-content: space-around;
			.icon1{
				
				width: 84rpx;
				height: 100%;
				image{
					margin-left: 20rpx;
					width: 41rpx;
					height: 36rpx;
				}
				
				.p2{
					text-align: center;
					margin-top: 14rpx;
					font-size: 26rpx;
					color: #3E3E3E;
				}
				
			}
		}
	}
	
	
	.content{
		width:670rpx;
		margin: 0 auto;
		margin-top: 50rpx;
		height: 550rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		overflow: hidden;
		
		.logo{
			margin-top: 50rpx;
			display: flex;
			justify-content: space-around;
			.logo-1{
				width: 60rpx;
				height: 110rpx;
				
				image{
					width: 60rpx;
					height: 55rpx;
				}
				.p3{
					text-align: center;
					font-size: 26rpx;
					color: #3E3E3E;
				}
			}
		}
	}
	
	.di{
		width: 100%;
		height: 100rpx;
	}
</style>
